import * as React from 'react';
import { Text, View,Image, StyleSheet,FlatList,ActivityIndicator } from 'react-native';
const dataArr = [
    '扫一扫',
    '扫一扫1',
    '扫一扫2',
    '扫一扫3',
    '夜间模式',
    '夜间模式1',
    '夜间模式2',
    '夜间模式3',
    '清理缓存',
    '清理缓存1',
    '清理缓存2',
    '清理缓存3'];
export default class App extends React.Component {
    constructor(props){
        super(props)
        this.state ={
            isloading:false,
            dataArr: dataArr
        }
    }
    render(){
        return (
            <View style={styles.container}>
                <View style={styles.navigationStyle}>
                    <Text style={styles.characterStyle}>更多</Text>
                    <Image source = {require('./assets/dot.png')} style={styles.picStyle}/>
                </View>
                <FlatList
                    data = {this.state.dataArr}
                    renderItem ={({item})=>{
                        return (
                            <View style={styles.itemStyle}>
                                <Text>{item}</Text>
                            </View>
                        )
                    }
                    }
                    refreshing={this.state.isloading}
                    onRefresh = { () =>{this.loadData()}}
                    scrollToEnd ={
                        () =>{alert("123")}
                    }
                    ItemSeparatorComponent={
                        () =>{
                            return (
                                <View style={{backgroundColor:'C2C3C4',height:1}}></View>
                            )
                        }
                    }
                    ListEmptyComponent ={
                        () =>{
                            return (
                                <Text>这里什么也没有，暂无记录</Text>
                            )
                        }
                    }
                    ListHeaderComponent ={
                        () =>{
                            return (
                                <Text>这是头部组件</Text>
                            )
                        }
                    }
                    ListFooterComponent ={
                        () =>{
                            return (
                                <View>
                                    <ActivityIndicator
                                        size ={'large'}
                                        color={"#f00"}
                                        animating ={true}
                                    />
                                    <Text>这是尾部组件</Text>
                                </View>
                            )
                        }
                    }
                    onEndReached ={() =>{this.loadData()}}
                />
            </View>
        )}

    loadData(){
        this.setState({
            isloading:true
        })
        setTimeout(() =>{
            let dataArr = []
            for(let i=this.state.dataArr.length -1;i>=0;i-- ){
                dataArr.push(this.state.dataArr[i])
            }
            this.setState({
                dataArr:dataArr,
                isloading:false
            })
        },2000)
    }
}

const styles = StyleSheet.create({
    itemStyle:{
        flexDirection:'row',
        justifyContent:'space-between',
        height:150,
        backgroundColor: '#FFF',
        alignItems:'center',
        padding:5
    },
    container: {
        flex: 1,
        backgroundColor: '#ecf0f1',
    },
    picStyle:{
        position:'absolute',
        right:10,
        top:24
    },
    characterStyle:{
        color:'#FFF',
        fontSize:20,
        fontWeight:'900'
    },
    navigationStyle:{
        height:70,
        backgroundColor:'#000',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'
    }
});
